<template><div><h1 id="elementui相关问题" tabindex="-1"><a class="header-anchor" href="#elementui相关问题" aria-hidden="true">#</a> elementUI相关问题</h1>
<h3 id="el-dialog更改宽度更改不了" tabindex="-1"><a class="header-anchor" href="#el-dialog更改宽度更改不了" aria-hidden="true">#</a> el-dialog更改宽度更改不了？</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>customClass<span class="token operator">=</span><span class="token string">"customWidth"</span>     
<span class="token comment">//重新定义class名字，class写样式需要用！important或者/deep/</span>

<span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">deep</span><span class="token regex-delimiter">/</span></span> <span class="token punctuation">.</span>customWidth<span class="token punctuation">{</span>
  <span class="token literal-property property">width</span><span class="token operator">:</span> 1400px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="富文本通过url传值乱码问题" tabindex="-1"><a class="header-anchor" href="#富文本通过url传值乱码问题" aria-hidden="true">#</a> 富文本通过url传值乱码问题</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>传值需要编码，接收需要解码，编码解码不需要下载插件，方法直接使用
<span class="token function">编码：encodeURIComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token function">解码：decodeURIComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="解决element-ui中的el-select选择器无法显示选中内容的问题" tabindex="-1"><a class="header-anchor" href="#解决element-ui中的el-select选择器无法显示选中内容的问题" aria-hidden="true">#</a> 解决element-ui中的el-select选择器无法显示选中内容的问题</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$set</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">.</span>status<span class="token punctuation">,</span>status<span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$<span class="token keyword">delete</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">,</span>status<span class="token punctuation">)</span>
或：
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$forceUpdate</span><span class="token punctuation">(</span><span class="token punctuation">)</span>   <span class="token comment">//不建议使用</span>
或：
<span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">.</span>status <span class="token operator">=</span> status
<span class="token keyword">this</span><span class="token punctuation">.</span>form <span class="token operator">=</span>  <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="日期插件传时分秒默认" tabindex="-1"><a class="header-anchor" href="#日期插件传时分秒默认" aria-hidden="true">#</a> 日期插件传时分秒默认</h3>
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code>//  default-time  默认时分秒，第一个开始时间，第二个为结束时间     
//需要注意：value-format="yyyy-MM-dd HH:mm:ss"中 HH  必须为大写
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-date-picker</span>
    <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ruleForm.dates<span class="token punctuation">"</span></span>
    <span class="token attr-name">:default-time</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>['00:00:00','23:59:59']<span class="token punctuation">"</span></span>
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>daterange<span class="token punctuation">"</span></span>
    <span class="token attr-name">value-format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yyyy-MM-dd HH:mm:ss<span class="token punctuation">"</span></span>
    <span class="token attr-name">range-separator</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>至<span class="token punctuation">"</span></span>
    <span class="token attr-name">start-placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>开始日期<span class="token punctuation">"</span></span>
    <span class="token attr-name">end-placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>结束日期<span class="token punctuation">"</span></span>
    <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>noswitch<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-date-picker</span><span class="token punctuation">></span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="强制刷新" tabindex="-1"><a class="header-anchor" href="#强制刷新" aria-hidden="true">#</a> 强制刷新</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$forceUpdate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 
<span class="token comment">//应用场景，element ui 下拉框选择后绑定值改变，显示不变</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="时间日期选择器控件自适应缩小时-至-样式被截取" tabindex="-1"><a class="header-anchor" href="#时间日期选择器控件自适应缩小时-至-样式被截取" aria-hidden="true">#</a> 时间日期选择器控件自适应缩小时 '至' 样式被截取</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token operator">&lt;</span>el<span class="token operator">-</span>date<span class="token operator">-</span>picker
   v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"value1"</span>
   type<span class="token operator">=</span><span class="token string">"datetimerange"</span>
   range<span class="token operator">-</span>separator<span class="token operator">=</span><span class="token string">"至"</span>
   start<span class="token operator">-</span>placeholder<span class="token operator">=</span><span class="token string">"开始日期"</span>
   end<span class="token operator">-</span>placeholder<span class="token operator">=</span><span class="token string">"结束日期"</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>date<span class="token operator">-</span>picker<span class="token operator">></span>

<span class="token punctuation">.</span>el<span class="token operator">-</span>date<span class="token operator">-</span>editor <span class="token punctuation">.</span>el<span class="token operator">-</span>range<span class="token operator">-</span>separator<span class="token punctuation">{</span>
    <span class="token literal-property property">width</span><span class="token operator">:</span> 20px<span class="token operator">!</span>important<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="时间日期选择器只能选择某一时段之间的时间" tabindex="-1"><a class="header-anchor" href="#时间日期选择器只能选择某一时段之间的时间" aria-hidden="true">#</a> 时间日期选择器只能选择某一时段之间的时间</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token operator">&lt;</span>el<span class="token operator">-</span>date<span class="token operator">-</span>picker
     v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"scope.row.validTime"</span>
     type<span class="token operator">=</span><span class="token string">"daterange"</span>
     value<span class="token operator">-</span>format<span class="token operator">=</span><span class="token string">"yyyy-MM-dd HH:mm:ss"</span>
     format<span class="token operator">=</span><span class="token string">"yyyy-MM-dd"</span>
     <span class="token operator">:</span><span class="token keyword">default</span><span class="token operator">-</span>time<span class="token operator">=</span><span class="token string">"['00:00:00','23:59:59']"</span>
     <span class="token operator">:</span>picker<span class="token operator">-</span>options<span class="token operator">=</span><span class="token string">"pickerOptions"</span>
     range<span class="token operator">-</span>separator<span class="token operator">=</span><span class="token string">"至"</span>
     start<span class="token operator">-</span>placeholder<span class="token operator">=</span><span class="token string">"开始日期"</span>
     end<span class="token operator">-</span>placeholder<span class="token operator">=</span><span class="token string">"结束日期"</span>
     @focus<span class="token operator">=</span><span class="token string">"getValidTime(scope.row)"</span>
<span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>date<span class="token operator">-</span>picker<span class="token operator">></span>

<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token literal-property property">validStart</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
     <span class="token literal-property property">validEnd</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
     <span class="token literal-property property">pickerOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">disabledDate</span><span class="token operator">:</span> <span class="token parameter">time</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>validStart <span class="token operator">&amp;&amp;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>validEnd<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">(</span>
              <span class="token comment">//返回只能在某一个区间内点击  </span>
              time<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&lt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>validStart <span class="token operator">||</span> time<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span>validEnd
            <span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">//输入框获取焦点赋值开始时间和结束时间</span>
<span class="token function">getValidTime</span><span class="token punctuation">(</span><span class="token parameter">row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>validStart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>row<span class="token punctuation">.</span>validStart<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>validEnd <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>row<span class="token punctuation">.</span>validEnd<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="表格固定列最后一行显示不全" tabindex="-1"><a class="header-anchor" href="#表格固定列最后一行显示不全" aria-hidden="true">#</a> 表格固定列最后一行显示不全</h3>
<p><img src="/images/element-table.png" alt="element-table" loading="lazy"></p>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>这种情况有时在宽度刚好处于临界值状态时会出现。
因为固定列是独立于表格body动态计算高度的，出现了固定列高度小于表格高度所以造成最后一行被遮挡。

<span class="token comment">// 设置全局</span>
<span class="token punctuation">.</span>el<span class="token operator">-</span>table__fixed<span class="token operator">-</span>right <span class="token punctuation">{</span>
  <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">100</span><span class="token operator">%</span> <span class="token operator">!</span>important<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="去除type-number-输入框聚焦时的上下箭头" tabindex="-1"><a class="header-anchor" href="#去除type-number-输入框聚焦时的上下箭头" aria-hidden="true">#</a> 去除type=&quot;number&quot;输入框聚焦时的上下箭头</h3>
<p><img src="/images/element-arrow.png" alt="element-arrow" loading="lazy"></p>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token operator">&lt;</span>el<span class="token operator">-</span>input type<span class="token operator">=</span><span class="token string">"number"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"clear-number-input"</span> <span class="token operator">/</span><span class="token operator">></span>

<span class="token comment">/* 设置全局 */</span>
<span class="token punctuation">.</span>clear<span class="token operator">-</span>number<span class="token operator">-</span>input<span class="token punctuation">.</span>el<span class="token operator">-</span>input<span class="token operator">:</span><span class="token operator">:</span><span class="token operator">-</span>webkit<span class="token operator">-</span>outer<span class="token operator">-</span>spin<span class="token operator">-</span>button<span class="token punctuation">,</span>
<span class="token punctuation">.</span>clear<span class="token operator">-</span>number<span class="token operator">-</span>input<span class="token punctuation">.</span>el<span class="token operator">-</span>input<span class="token operator">:</span><span class="token operator">:</span><span class="token operator">-</span>webkit<span class="token operator">-</span>inner<span class="token operator">-</span>spin<span class="token operator">-</span>button <span class="token punctuation">{</span>
  <span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token operator">-</span>webkit<span class="token operator">-</span>appearance<span class="token operator">:</span> none <span class="token operator">!</span>important<span class="token punctuation">;</span>
<span class="token punctuation">}</span> 
<span class="token punctuation">.</span>clear<span class="token operator">-</span>number<span class="token operator">-</span>input<span class="token punctuation">.</span>el<span class="token operator">-</span>input input<span class="token punctuation">[</span>type<span class="token operator">=</span><span class="token string">"number"</span><span class="token punctuation">]</span><span class="token operator">:</span><span class="token operator">:</span><span class="token operator">-</span>webkit<span class="token operator">-</span>outer<span class="token operator">-</span>spin<span class="token operator">-</span>button<span class="token punctuation">,</span>
<span class="token punctuation">.</span>clear<span class="token operator">-</span>number<span class="token operator">-</span>input<span class="token punctuation">.</span>el<span class="token operator">-</span>input input<span class="token punctuation">[</span>type<span class="token operator">=</span><span class="token string">"number"</span><span class="token punctuation">]</span><span class="token operator">:</span><span class="token operator">:</span><span class="token operator">-</span>webkit<span class="token operator">-</span>inner<span class="token operator">-</span>spin<span class="token operator">-</span>button <span class="token punctuation">{</span>
  <span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token operator">-</span>webkit<span class="token operator">-</span>appearance<span class="token operator">:</span> none <span class="token operator">!</span>important<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>clear<span class="token operator">-</span>number<span class="token operator">-</span>input<span class="token punctuation">.</span>el<span class="token operator">-</span>input <span class="token punctuation">{</span>
  <span class="token operator">-</span>moz<span class="token operator">-</span>appearance<span class="token operator">:</span> textfield<span class="token punctuation">;</span>
<span class="token punctuation">}</span> 
<span class="token punctuation">.</span>clear<span class="token operator">-</span>number<span class="token operator">-</span>input<span class="token punctuation">.</span>el<span class="token operator">-</span>input input<span class="token punctuation">[</span>type<span class="token operator">=</span><span class="token string">"number"</span><span class="token punctuation">]</span> <span class="token punctuation">{</span>
  <span class="token operator">-</span>moz<span class="token operator">-</span>appearance<span class="token operator">:</span> textfield<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="弹窗重新打开时表单上次的校验信息未清除" tabindex="-1"><a class="header-anchor" href="#弹窗重新打开时表单上次的校验信息未清除" aria-hidden="true">#</a> 弹窗重新打开时表单上次的校验信息未清除</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 有人会在open时在$nextTick里重置表单，而我选择在关闭时进行重置。</span>

<span class="token operator">&lt;</span>el<span class="token operator">-</span>dialog @close<span class="token operator">=</span><span class="token string">"onClose"</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>el<span class="token operator">-</span>form ref<span class="token operator">=</span><span class="token string">"form"</span><span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>form<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>dialog<span class="token operator">></span>

<span class="token comment">// 弹窗关闭时重置表单</span>
<span class="token function">onClose</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">[</span><span class="token string">'form'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">resetFields</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="表头与内容错位" tabindex="-1"><a class="header-anchor" href="#表头与内容错位" aria-hidden="true">#</a> 表头与内容错位</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 全局设置</span>
<span class="token punctuation">.</span>el<span class="token operator">-</span>table<span class="token operator">--</span>scrollable<span class="token operator">-</span>y <span class="token punctuation">.</span>el<span class="token operator">-</span>table__body<span class="token operator">-</span>wrapper <span class="token punctuation">{</span>
 overflow<span class="token operator">-</span>y<span class="token operator">:</span> overlay <span class="token operator">!</span>important<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="根据条件高亮行并去除默认hover颜色" tabindex="-1"><a class="header-anchor" href="#根据条件高亮行并去除默认hover颜色" aria-hidden="true">#</a> 根据条件高亮行并去除默认hover颜色</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token operator">&lt;</span>el<span class="token operator">-</span>table <span class="token operator">:</span>row<span class="token operator">-</span><span class="token keyword">class</span><span class="token operator">-</span>name<span class="token operator">=</span><span class="token string">"tableRowClassName"</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>table<span class="token operator">></span>

<span class="token function">tableRowClassName</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> row <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> row<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token number">2</span> <span class="token operator">?</span> <span class="token string">'highlight'</span> <span class="token operator">:</span> <span class="token string">''</span>
<span class="token punctuation">}</span>

<span class="token comment">// 设置全局</span>
<span class="token punctuation">.</span>el<span class="token operator">-</span>table <span class="token punctuation">.</span>highlight <span class="token punctuation">{</span>
  background<span class="token operator">-</span>color<span class="token operator">:</span> #b6e8fe<span class="token punctuation">;</span>
  <span class="token operator">&amp;</span><span class="token operator">:</span>hover <span class="token operator">></span> td <span class="token punctuation">{</span>
    background<span class="token operator">-</span>color<span class="token operator">:</span> initial <span class="token operator">!</span>important<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  td <span class="token punctuation">{</span>
    background<span class="token operator">-</span>color<span class="token operator">:</span> initial <span class="token operator">!</span>important<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="table-内嵌-input-调用-focus-方法无效" tabindex="-1"><a class="header-anchor" href="#table-内嵌-input-调用-focus-方法无效" aria-hidden="true">#</a> table 内嵌 input 调用 focus 方法无效</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token operator">&lt;</span>el<span class="token operator">-</span>table<span class="token operator">></span>
  <span class="token operator">&lt;</span>el<span class="token operator">-</span>table<span class="token operator">-</span>column label<span class="token operator">=</span><span class="token string">"名称"</span><span class="token operator">></span>
    <span class="token operator">&lt;</span>template<span class="token operator">></span>
      <span class="token operator">&lt;</span>el<span class="token operator">-</span>input ref<span class="token operator">=</span><span class="token string">"inputRef"</span> <span class="token operator">/</span><span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>table<span class="token operator">-</span>column<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>table<span class="token operator">></span>

<span class="token comment">// 无效</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">[</span><span class="token string">'inputRef'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">[</span><span class="token string">'inputRef'</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">[</span><span class="token string">'inputRef'</span><span class="token punctuation">]</span><span class="token punctuation">.</span>$el<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">// 有效</span>
<span class="token operator">&lt;</span>el<span class="token operator">-</span>input id<span class="token operator">=</span><span class="token string">"inputRef"</span> <span class="token operator">/</span><span class="token operator">></span>
document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'inputRef'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div></template>


